<template>
  <el-drawer
    @opened="onDrawerOpened"
    v-model="drawerVisible"
    :destroy-on-close="true"
    size="450px"
    :title="`${drawerProps.title}科室`"
  >
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="科室名称" prop="strKeShiMingCheng">
        <el-input
          ref="strKeShiMingChengLs"
          v-model="drawerProps.row!.strKeShiMingCheng"
          placeholder="请填写科室名称"
          clearable
          @keydown.enter="strKeShiMingChengKeyDown"
        ></el-input>
      </el-form-item>
      <el-form-item label="科室类别" prop="strKeShiLeiXing">
        <el-select ref="strKeShiLeiXingLs" v-model="drawerProps.row!.strKeShiLeiXing" placeholder="请选择科室类别" clearable>
          <!--          todo-->
          <el-option v-for="item in keshiType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="拼音码" prop="strPYM">
        <el-input
          @keydown.enter="strPYMLsKeyDown"
          ref="strPYMLs"
          v-model="drawerProps.row!.strPYM"
          placeholder="请填写拼音码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="备注1">
        <el-input
          @keydown.enter="strBeiZhu1LsKeyDown"
          ref="strBeiZhu1Ls"
          v-model="drawerProps.row!.strBeiZhu1"
          placeholder="请填写备注1"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="备注2">
        <el-input
          @keydown.enter="strBeiZhu2LsKeyDown"
          ref="strBeiZhu2Ls"
          v-model="drawerProps.row!.strBeiZhu2"
          placeholder="请填写备注2"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="所属院区" prop="strSuoShuYuanQu">
        <el-select multiple v-model="drawerProps.row!.strSuoShuYuanQu" placeholder="请选择所属院区" clearable>
          <el-option v-for="item in yuanQuType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <div class="drawerVisible-nodules">
        <span>小结生成格式:</span>
        <div style="display: flex; flex: 1; justify-content: space-around">
          <span @click="tuiJian" class="drawerVisible-nodules-color">检验格式推荐</span>
          <span @click="geShi" class="drawerVisible-nodules-color">格式说明</span>
        </div>
      </div>
      <el-input
        ref="strXiaoJieShengChengGeShiLs"
        type="textarea"
        :autosize="{ minRows: 8, maxRows: 8 }"
        v-model="drawerProps.row!.strXiaoJieShengChengGeShi"
        placeholder=""
      ></el-input>

      <el-form-item label="是否启用">
        <el-switch v-model="drawerProps.row.strShiFouQiYong" placeholder="" clearable></el-switch>
        <span class="drawerVisible-nodules-color1">(启用/禁用科室)</span>
      </el-form-item>
      <el-form-item label="申请单显示" prop="strXiangShiFangShi">
        <!--        <el-switch v-model="drawerProps.row!.strXiangShiFangShi" placeholder="" clearable></el-switch>-->
        <!--        <span class="drawerVisible-nodules-color1">(本科室组合项目在分检页面展示方式)</span>-->
        <el-select v-model="drawerProps.row!.strXiangShiFangShi" placeholder="请选择" clearable>
          <el-option v-for="item in shenQingDan" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="AreaDrawer">
import { ref, reactive, watch } from "vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { pinyin } from "pinyin-pro";
import { useFocusInput } from "@/utils";
// import { User } from "@/api/interface";

const rules = reactive({
  strKeShiMingCheng: [{ required: true, message: "请填写科室名称" }],
  strKeShiLeiXing: [{ required: true, message: "请填写科室类别" }],
  strPYM: [{ required: true, message: "请填写拼音码" }],
  strSuoShuYuanQu: [{ required: true, message: "请填写所属院区" }],
  strXiangShiFangShi: [{ required: true, message: "请选择申请单显示" }]
});
const shenQingDan = ref([
  {
    value: "申请单",
    label: "申请单"
  },
  {
    value: "项目",
    label: "项目"
  }
]);

const tuiJian = () => {
  drawerProps.value.row!.strXiaoJieShengChengGeShi = "明细项目名称 结果 单位 (参考范围)";
};
const geShi = () => {
  const ls = `
  <strong>自定义小结格式一般用于检验科小结    示例：</strong>
<br/>
(1)淋巴细胞数 4.1 10^9/L (1.1--3.2)<br/> (2)血红蛋白 165 g/L (115--150)
<br/>
  <strong>其中序号为自动添加，其他特定字符为：</strong>
<br/>
    明细项目名称   代表  项目名称<br/>
    结果           代表  项目结果<br/>
    单位           代表  项目单位<br/>
    参考范围       代表  项目参考范围
<br/>
 <strong>可以点击后面【检验推荐格式】标签查看推荐格式字符串</strong>
  `;
  ElMessageBox.alert(ls, "提示", {
    dangerouslyUseHTMLString: true,
    confirmButtonText: "确定"
  });
};
interface DrawerProps {
  title: string;
  isView: boolean;
  // row: Partial<User.ResUserList>;
  row: Partial<any>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {} //数据的信息
});

watch(
  () => {
    return drawerProps.value.row?.strKeShiMingCheng;
  },
  () => {
    if (drawerProps.value.row!.strKeShiMingCheng) {
      drawerProps.value.row!.strPYM = pinyin(drawerProps.value.row?.strKeShiMingCheng, {
        pattern: "first",
        toneType: "none"
      })
        .toUpperCase()
        .replace(/\s/g, "");
    }
  }
);
// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  console.log(drawerProps.value.row);
  drawerVisible.value = true;
  if (params.title === "编辑") {
    paramsDrawerProps(params);
  }
  if (params.title === "新增") {
    drawerProps.value.row.strSuoShuYuanQu = [];
    drawerProps.value.row.strSuoShuYuanQu = yuanQuType.value.map((item: any) => item.value);
    drawerProps.value.row.strShiFouQiYong = true;
    drawerProps.value.row.strXiangShiFangShi = "申请单";
  }
};

const paramsDrawerProps = params => {
  // drawerProps.value.row = params
  let obj = {
    // strDangQainYuanQuQianZhui: params.row.strDangQainYuanQuQianZhui,
    strKeShiMingCheng: params.row.KeShiMingCheng,
    strKeShiLeiXing: params.row.KeShiLeiXing,
    strPYM: params.row.PYM,
    strBeiZhu1: params.row.BeiZhu1,
    strBeiZhu2: params.row.BeiZhu2,
    strSuoShuYuanQu: convertStringToArray(params.row.SuoShuYuanQu),
    strXiaoJieShengChengGeShi: params.row.XiaoJieFangShi, //没有？
    strShiFouQiYong: params.row.ShiFouKeYong === "是",
    strXiangShiFangShi: params.row.XianShiFangShi, //申请单？？？？？ 下拉
    strKeShiID: params.row.KeShiID
  };
  drawerProps.value.row = obj;
};
const convertStringToArray = str => {
  let arr = str.split(";");
  arr = arr.map(item => item.trim());
  arr = arr.filter(item => {
    // 过滤掉空字符串
    if (item === "") return false;
    return !/^\s*$/.test(item);
  });
  return arr;
};

const yuanQuType = ref<any>([]);
const keshiType = ref([
  {
    value: "检查科室",
    label: "检查科室"
  },
  {
    value: "检验科室",
    label: "检验科室"
  },
  {
    value: "特检科室",
    label: "特检科室"
  },
  {
    value: "放射科室",
    label: "放射科室"
  },
  {
    value: "电测听",
    label: "电测听"
  },
  {
    value: "彩超科室",
    label: "彩超科室"
  },
  {
    value: "肺功能",
    label: "肺功能"
  },
  {
    value: "公卫科室",
    label: "公卫科室"
  }
]);
// 接收父组件传过来的参数
const hospitalLs = (params: any) => {
  yuanQuType.value = params;
  // drawerProps.value.row.strDangQainYuanQuQianZhui = area;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      let obj = {
        ...drawerProps.value.row,
        strSuoShuYuanQu: drawerProps.value.row.strSuoShuYuanQu.join(";"), //str.split(';')
        strShiFouQiYong: drawerProps.value.row.strShiFouQiYong === true ? "是" : "否",
        strXiangShiFangShi: drawerProps.value.row.strXiangShiFangShi ? drawerProps.value.row.strXiangShiFangShi : "",
        strBeiZhu1: drawerProps.value.row.strBeiZhu1 ? drawerProps.value.row.strBeiZhu1 : "",
        strBeiZhu2: drawerProps.value.row.strBeiZhu2 ? drawerProps.value.row.strBeiZhu2 : "",
        strXiaoJieShengChengGeShi: drawerProps.value.row.strXiaoJieShengChengGeShi
          ? drawerProps.value.row.strXiaoJieShengChengGeShi
          : ""
      };
      await drawerProps.value.api!(obj);
      ElMessage.success({ message: `${drawerProps.value.title}成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};
// const strKeShiMingChengLs = ref();
// const onDrawerOpened = () => {
//   KeyDownFocus(strKeShiMingChengLs.value);
// };
const [strKeShiMingChengLs, onDrawerOpened] = useFocusInput();
const [strKeShiLeiXingLs, strKeShiMingChengKeyDown] = useFocusInput();
const [strBeiZhu1Ls, strPYMLsKeyDown] = useFocusInput();
const [strBeiZhu2Ls, strBeiZhu1LsKeyDown] = useFocusInput();
const [strXiaoJieShengChengGeShiLs, strBeiZhu2LsKeyDown] = useFocusInput();

defineExpose({
  acceptParams,
  hospitalLs
});
</script>
<style scoped lang="scss">
.drawerVisible-nodules {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  width: 350px;
  height: 32px;
  padding: 0 12px 0 0;
  font-size: var(--el-form-label-font-size);
  line-height: 32px;
  color: var(--el-text-color-regular);
  .drawerVisible-nodules-color {
    color: #009688 !important;
    cursor: pointer;
    user-select: none;
  }
}
.drawerVisible-nodules-color1 {
  margin-left: 10px;
  color: #f78d8d !important;
}
</style>
